<template>
	<view class="container">
		<view class="header_area flex">
			<!-- <image src="../../static/group_img/header_bg.png" class="header_area_bg" mode="aspectFill"></image> -->
		</view>
		<view class="goods_list_area">
			<view class="goods_list_title">积分兑好礼</view>
			<!-- <view class="goods_border"></view> -->
			<view class="integr_wrap flex">
				<view class="integr_box" v-for="(item, index) in list_arr" :key="index"
					@click="navTo(`/pages_integral/change/listdetail?integerGoodsId=${item.id}`)">
					<image :src="item.img" mode="" class="integr_img"></image>
					<view class="integr_title">{{ item.spuTitle }}</view>
					<view class="integr_points" v-if="item.type === 1">{{ item.integral }}积分</view>
					<view v-if="item.type === 2" class="flex">
						<view class="integr_points">{{ item.integral }}元</view>
						<view class="integr_money" v-if="item.amount">+{{ item.amount / 100 }}元</view>
					</view>
					<view class="integr_has">已兑{{ item.sales }}份</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list_arr: [{
					img: '../../static/logo.jpg',
					spuTitle: '商品',
					type: 1,
					integral: 3,
					sales: 5,
					amount: 8,
					id: 1
				}, {
					spuTitle: '商品',
					type: 1,
					integral: 3,
					sales: 5,
					amount: 8,
					img: '../../static/logo.jpg',
					id: 2
				}],
			};
		},
		onHide() {},
		destroyed() {},
		onShow() {
			this.get_goods_list();
		},
		onLoad() {},
		onShareAppMessage() {
			return {
				title: '积分商城',

				// imageUrl: this.list_arr.imgList[0] + '?x-oss-process=style/600px',
				path: '/pages/integral/integral'
			};
		},
		methods: {
			navTo(url) {
				// if(!this.hasLogin){
				// 	url = '/pages/public/login';
				// }
				uni.navigateTo({
					url
				});
			},
			//获取积分商品列表
			get_goods_list() {
				this.$api.request('integralActivity', 'IntegralGoodsList', failres => {
					this.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					// this.list_arr = res.data;
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		width: 100%;
		min-height: 100vh;
		background: #ffffff;
		flex-direction: column;
		align-items: center;
	}

	.flex {
		display: flex;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.goods_list_area {
		width: 100%;

		.goods_list_title {
			width: 94%;
			margin: 25upx auto 10upx;
			text-indent: 28upx;
			font-size: 30upx;
			font-weight: bold;
			color: #000;
			border-left: 4px #ff135c solid;
		}

		// .goods_border {
		// 	border-bottom: solid #c9c9c9 1px;
		// 	margin: 18upx auto;
		// 	width: 94%;
		// }
		.integr_wrap {
			width: 94%;
			margin: 0 auto;
			justify-content: space-between;
			align-items: center;
			align-items: center;
			flex-wrap: wrap;
			padding: 15upx 0;

			.integr_box {
				width: 336upx;
				box-shadow: 2upx 2upx 12upx #c0c4cc;
				border-radius: 15upx;
				margin-bottom: 35upx;

				.integr_img {
					width: 336upx;
					height: 330upx;
					border-radius: 15upx 15upx 0 0;
				}

				.integr_title {
					color: #424242;
					font-size: 24upx;
					padding-left: 20upx;
					line-height: 45upx;
					font-weight: 600;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.integr_points {
					color: #ff135c;
					font-size: 22upx;
					padding-left: 20upx;
					line-height: 45upx;
				}

				.integr_money {
					color: #ff135c;
					font-size: 22upx;
					line-height: 45upx;
				}

				.integr_has {
					color: #aeaeae;
					font-size: 22upx;
					padding-left: 20upx;
					line-height: 45upx;
				}
			}
		}
	}
</style>
